<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker style="width:240px" :editable="false" :clearable="false" v-model="pickerDate"
                        value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select style="width:300px" placeholder="选择门店" v-model="formInline.store_id" filterable>
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select :clearable="true" filterable placeholder="选择类型" v-model="formInline.type"
                        style="width:130px" @change="typeChange">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select style="width:130px" v-model="search_type" filterable @change="searchTypeChange">
                        <el-option v-for="item in searchList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="search_font" :maxlength="30" :placeholder="searchPlaceholder" @keyup.enter.native="searchClick"
                        style="width:180px"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <transition name="fade" mode="out-in" :key="formInline.type">
                <!-- 表格 -->
                <el-table highlight-current-row :data="list" v-loading.body="listLoading" size="small" border>
                    <el-table-column align="center" label='卡号' prop="card_no"></el-table-column>
                    <el-table-column align="center" label='姓名' prop="user_name"></el-table-column>
                    <el-table-column align="center" label='性别' prop="sex" width="80"></el-table-column>
                    <el-table-column align="center" label='手机' prop="mobile"></el-table-column>
                    <el-table-column align="center" label='身份证' prop="id_number"></el-table-column>
                    <el-table-column align="center" label='用户类型'>
                        <template slot-scope="scope">
                            {{scope.row.type_id==5 ?'E舞成名卡':scope.row.type_id}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label='所属门店' prop="store_name"></el-table-column>
                    <el-table-column align="center" label='注册时间' prop="date_create"></el-table-column>
                    <el-table-column align="center" label='到期时间' prop="date_valid"></el-table-column>
                    <el-table-column v-if="formInline.type==0||formInline.type==1" align="center" label='可用币数'
                        prop="coins">
                    </el-table-column>
                    <el-table-column v-if="formInline.type==0||formInline.type==1" align="center" label='可用积分'
                        prop="score">
                    </el-table-column>
                    <el-table-column v-if="formInline.type==0||formInline.type==1" align="center" label='可用票数'>
                        <template slot-scope="scope">
                            {{scope.row.card_type_id=='--' ?'--':scope.row.ticket_num}}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="formInline.type==0||formInline.type==6 " align="center" label='可用星数'
                        prop="stars">
                    </el-table-column>
                    <el-table-column v-if="formInline.type!=1 && formInline.type!=6" align="center" label='可用次数'>
                        <template slot-scope="scope">
                            {{scope.row.times==-1 ?'-':scope.row.times}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label='状态' width="100">
                        <template slot-scope="scope">
                            <span :class="{success:scope.row.edit=='正常'}">
                                {{scope.row.edit}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label='操作' width="130">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.status=='正常'||scope.row.status=='已过期'||scope.row.status=='已挂失'" type="primary"
                                @click="editClick(scope.row,scope.$index)" size="small"> 冻
                                结 </el-button>
                            <el-button v-else-if="scope.row.status=='审核中'" disabled type="warning" size="small"> 审核中 </el-button>
                            <el-button v-else-if="scope.row.status=='申请解冻'" type="warning" 
                                @click="editClick(scope.row,scope.$index)" size="small">
                                申请解冻 </el-button>
                            <el-button v-else-if="scope.row.status=='重新申请解冻'" type="warning"
                                @click="editClick(scope.row,scope.$index)" size="small">
                                重新申请解冻 </el-button>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                </el-table>
            </transition>
            <!-- 弹框 -->
            <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="infoDialog" width="600px">
                <p style="margin-top:0" v-if="status==3">{{dialogInfo}}</p>
                <el-input type="textarea" :rows="4" :placeholder="dialogPlaceholder" v-model="textarea" :maxlength="100">
                </el-input>
                <div slot="footer" class="dialog-footer">
                    <el-button v-if="status==1" type="primary" @click="saveClick(23)">确认</el-button>
                    <el-button v-else-if="status==2" type="primary" @click="saveClick(30)">申请解冻</el-button>
                    <el-button v-else type="primary" @click="saveClick(30)">重新申请解冻</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="20" layout="prev, pager, next, jumper"
                :total="totalDataNumber">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        getPage,
        getBrandList,
        getStoreList,
        unfreeze,
        edit
    } from "@/api/member/member_userList";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        data() {
            return {
                storeList: null,
                brandList: [],
                typeList: [{ id: 0, name: '全部类型' }, { id: 1, name: '会员卡' }, { id: 2, name: '10次卡' }, { id: 3, name: '20次卡' }, { id: 4, name: '季卡' }, { id: 5, name: '年卡' }, { id: 6, name: '星星卡' }, { id: 7, name: '6次卡' }, { id: 8, name: '12次卡' }, { id: 9, name: 'E舞成名卡' }, { id: 10, name: '月卡' }],
                list: null,
                listLoading: false,
                currentPage: 1,
                totalDataNumber: 1,
                searchPlaceholder: "请输入卡号",
                searchList: [{ id: 0, name: '会员卡号' }, { id: 1, name: '会员姓名' }, { id: 2, name: '手机号' }, { id: 3, name: '身份证号' }],
                search_type:0,
                status:1,
                vipID:"",
                itemIndex:"",
                search_font:"",
                textarea:"",
                dialogTitle:"",
                dialogInfo:"",
                dialogPlaceholder:"",
                infoDialog:false,
                formInline: {
                    type: 0,
                    begin_time: "",
                    end_time: "",
                    mobile: "",
                    card_no: "",
                    name: "",
                    id_number: "",
                    store_id: '',
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            typeChange() {
                this.searchClick();
            },
            searchTypeChange(i){
                if(i==0){
                    this.searchPlaceholder="请输入卡号";
                }else if(i==1){
                    this.searchPlaceholder="请输入姓名"
                }else if(i==2){
                    this.searchPlaceholder="请输入手机号"
                }else{
                    this.searchPlaceholder="请输入身份证号"
                }
                this.search_font=""
            },
            getStore() {
                getStoreList({ category_id: 247 }).then(response => {
                    this.storeList = response; 
                    let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else { 
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    } 
                });
            },
            // 操作
            editClick(row, index) {
                // console.log(row)
                this.textarea="";
                this.vipID=row.id;
                this.itemIndex=index;
                this.dialogTitle=row.status=="正常"||row.status=='已过期'||row.status=='已挂失'?"冻结":row.status=="申请解冻"?"申请解冻":"审核详情";
                this.status=row.status=="正常"||row.status=='已过期'||row.status=='已挂失'?1:row.status=="申请解冻"?2:3;
                this.dialogInfo=row.remark;
                this.dialogPlaceholder=row.status=="正常"||row.status=='已过期'||row.status=='已挂失'?"请输入冻结原因":"请输入申请解冻原因";
                this.infoDialog=true;
                // this.$confirm(status == 23 ? "是否冻结" : "是否解冻", '提示', { type: 'warning' }).then(() => {
                //     edit({ status: status, id: id }).then(response => {
                //         this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
                //         if (response.code == 1) {
                //             this.list[index].status = (status == 23 ? '冻结' : '正常')
                //         };
                //     })
                // })
            },
            saveClick(status){
                if(!this.textarea){
                    this.$message.error("请输入原因")
                    return;
                }
                if(status==23){
                    edit({ status, id: this.vipID,remark: this.textarea}).then(response => {
                        this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
                        if (response.code == 1) {
                            this.list[this.itemIndex].status = '申请解冻'
                            this.list[this.itemIndex].edit = '冻结'
                        }
                    })
                }else{
                    unfreeze({ status, id: this.vipID,remark: this.textarea}).then(response => {
                        this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
                        if (response.code == 1) {
                            this.list[this.itemIndex].status = '审核中';
                        }
                    })
                }
                this.infoDialog=false;
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                this.currentPage = 1;
                this.formInline.card_no="";
                this.formInline.name="";
                this.formInline.mobile="";
                this.formInline.id_number="";
                if(this.search_type==0){
                    this.formInline.card_no=this.search_font;
                }else if(this.search_type==1){
                    this.formInline.name=this.search_font;                   
                }else if(this.search_type==2){
                    this.formInline.mobile=this.search_font;                      
                }else{
                    this.formInline.id_number=this.search_font;                      
                }
                getPage(this.formInline).then(response => {
                    this.totalDataNumber = response.page * 20;
                    getList(this.formInline).then(res => {
                        res.forEach(val=>{
                            val.edit=val.status=="申请解冻"||val.status=="审核中"||val.status=="重新申请解冻"?"冻结":val.status
                        })
                        this.list = res;
                        this.listLoading = false;
                    })
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            // 分页
            handleCurrentChange(val) {
                this.listLoading = true;
                getList(this.formInline, val).then(response => {
                    response.forEach(val=>{
                        val.edit=val.status=="申请解冻"||val.status=="审核中"||val.status=="重新申请解冻"?"冻结":val.status
                    })
                    this.list = response;
                    this.listLoading = false;
                });
            },
        }
    };
</script>